<template>
    <div>
        <div id='spcartlist' v-show="showList">
            <div class="cartcontent">
            <div class="cartop">
                <div class="spcar">购物车</div>
                <div class="spclear" @click="arr.splice(0, arr.length)">清空</div>
            </div>
            <div class="cartmiddle">
                <ul class="cartitems">
                    <li v-for="(item,index) in arr" :key='index'>
                        <div class="foodname">{{item.name}}</div>
                        <div class="itemsright">
                            <div class="foodprice"><span>￥</span>{{item.price}}</div>
                            <div class="foodcount">
                                <span class="layout-remove_circle_outline desc" @click="reduce(item)" ></span>
                                <span class="num">{{item.count}}</span>
                                <span class="layout-add_circle add" @click="add(item)"></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            </div>
        </div>
        <div class="footer">
            <div class="hshop" >
                <div class='cart' 
                    :style="{'background-color':this.arr.length > 0 ? 'rgb(0, 160, 220)' : '' }">
                    <van-badge 
                    class="cartnum" :content="arr.length" 
                    
                     />
                    <span 
                    :style="{'color':this.arr.length > 0 ? '#fff' : ''}"
                    class="layout-shopping_cart scart" @click="showList = !showList"></span>
                </div>
            </div>
            <div class="hprice" :style="{'color':this.arr.length > 0 ? '#fff' : ''}" >&yen; {{allPrice}}</div>
            <div class="addprice">另需配送￥4元</div>
            <!-- 去结算 background-color 0,128,0 -->
            <div class="totalprice" :style="{'background-color':this.allPrice > 20 ? 'rgb(0,128,0)' : '','color':this.allPrice > 20 ? '#fff' : ''}">{{isCount}}</div>
        </div>
        <div class='mock' v-show="showList" @click="showList = !showList"></div>
    </div>
   
</template>

<script>
// import _ from 'lodash' 
export default {
    name: "cart",
    //shopList: 是所有商品数组
    props: ['copyList'],
    data(){
        return{
            showList:false,
            arr:[],//购物车数组
            
        }
    },
    computed:{
        //总价钱
        allPrice(){
            let price = 0;
            this.arr.forEach(item => {
                price += item.price * item.count
            })
            return price
        },
        //显示起送还是去结算
        isCount(){
            return this.allPrice > 20 ? '去结算' : `还差￥${20 - this.allPrice}起送`
        }

    },
    watch: {
        copyList:{
            handler(){
                const newArr = [];
                //在购物车中要显示的数组
                this.copyList.forEach(item=>{
                    item.foods.forEach(food=>{
                        if(food.count){
                            newArr.push(food)
                        }
                    })
                });
                this.arr = [...newArr];
            },
            deep: true,
        }
    },
    methods: {
        add(item){
            //找到当前food 父数组的index
            let num = 0;
             this.copyList.forEach((firstItem,index)=>{
                    firstItem.foods.forEach(food=>{
                       if(food.name === item.name){
                           num = index;
                       }
                    })
                });
            this.$bus.$emit('add',{num,item})
        },
        reduce(item){
             this.$bus.$emit('reduce',item)
        }
    },
    mounted(){

    }
};
</script>

<style scoped>
    .footer{
        display: flex;
        align-items: center;
        position:fixed;
        bottom:0;
        width: 100%;
        height: 96rem;
        background-color: #141d27;
        z-index: 3;
     }
    .footer .hshop{
        position:absolute;
        bottom: 0;
        left: 36rem;
        width:116rem;
        height: 116rem;
        background-color:  #141d27;
        border-radius: 50%;
    }
    .footer .hshop .cart{
        display: flex;
        justify-content:center;
        align-items: center;
        position:absolute;
        bottom: 16rem;
        left: 16rem;
        width: 88rem;
        height: 88rem;
        border-radius: 50%;
        text-align: center;
        background-color:rgb(255, 255,255,0.1);
    }

    .footer .hshop .cart .active{
        display: flex;
        justify-content:center;
        align-items: center;
        position:absolute;
        bottom: 16rem;
        left: 16rem;
        width: 88rem;
        height: 88rem;
        border-radius: 50%;
        text-align: center;
        background-color:rgb(0,160,220);
    }

    .cart .cartnum{
        position:absolute;
        bottom:60rem;
        left:60rem;
    }
    .hshop .cart .scart{
        font-size:48rem;
        line-height:48rem;
        height:48rem;
        /* color: rgb(0,0,0,0.1); */
        color:rgb(255, 255,255,0.4);
    }
 
    .footer .hprice{
        font-size:32rem;
        color:rgb(255,255,255,0.4);
        font-weight: 700;
        line-height: 48rem;
        padding-right:24rem;
        margin-left:160rem;
        border-right: 1px solid rgb(255,255,255,0.1);
    }
    .footer .addprice{
        font-size: 32rem;
        color:rgb(255, 255,255,0.4);
        line-height: 48rem;
        margin-left: 24rem;
    }
     .footer .totalprice{
        position:absolute;
        right:0;
        bottom: 0;
        width: 210rem;
        text-align:center;
        font-size: 24rem;
        color:rgb(255,255,255,0.4);
        font-weight: 700;
        line-height: 96rem;
        background-color: #2b333b;
    }


    .mock {
        position:fixed;
        z-index  :1 ;
        left : 0;
        right :0 ;
        top : 0;
        bottom :0 ;
        background : rgba(7,17,27,.6);
        backdrop-filter : blur(5px);
    }

    #spcartlist{
        position: relative;
    }
    .cartcontent{
        position: fixed;
        width: 100%;
        height:515rem;
        bottom:96rem;
        background-color: #fff;
        z-index: 2;
    }
    .cartcontent .cartop{
        display: flex;
        justify-content:space-between;
        align-items: center;
        height: 79rem;
        background-color:#f3f5f7;
        padding:0 36rem;
        border-bottom: 1px solid rgba(7,17,27,0.1);
    }
    .cartop .spcar{
        font-size: 28rem;
        font-weight: normal;
        color: rgb(7,17,27);
        line-height:80rem;
    }
    .cartop .spclear{
        font-size: 24rem;
        color:rgb(0,160,220);
        line-height: 80rem;
    }
    .cartitems{
        padding:0 36rem;
    }
    .cartitems li{
        display: flex;
        position: relative;
        justify-content:space-between;
        padding: 24rem 0;
        border-bottom: 1px solid rgba(7,17,27,0.1);
    }
    li .foodname{
        font-size: 28rem;
        color:rgb(7,17,27);
        line-height: 48rem;
    }
    li .itemsright{
        position: absolute;
        display: flex;
        align-items: center;
        bottom:24rem;
        right: 36rem;
        height: 48rem;
        line-height:48rem;

    }
    .itemsright .foodprice{
        font-size: 28rem;
        color:rgb(240,20,20);
        font-weight:700;
        line-height:48rem;
        margin-right: 16rem;
    }
    .foodprice span{
      font-size:20rem;
      font-weight: normal;
    }
    .foodcount {
        display: flex;
        align-items: center;
    }
    .foodcount .num{
        font-size: 20rem;
        color:rgb(147,153,159);
        text-align:center;
        line-height:48rem;
        margin:0 24rem;
    } 
    
    .foodcount .desc,.foodcount .add{
        font-size:48rem;
        color: rgb(0,160,220);
        line-height:48rem;
    }
</style>